<template>
    <el-aside width="240px" class="image-aside" v-loading="loading">
        <div class="top">
            <AsideList 
            :active="activeId == item.id" 
            v-for="(item, index) in list" 
            :key="index" 
            @click="handleChangeActiveID(item.id)"
            @edit="handEdit(item)" 
            @delete="handDelete(item)">{{ item.name }}</AsideList>
        </div>
        <div class="bottom">
            <el-pagination small background layout="prev, next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-aside>

    <FormDrawer ref="formDrawerRef" @submit="handSubmit" :title="drawerTitle">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="80px" :inline="false" size="small">
            <el-form-item label="分类名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="排序" prop="order">
                <el-input-number v-model="form.order" :min="0" :max="1000" />
            </el-form-item>
        </el-form>

    </FormDrawer>
</template>

<script setup>
import { ref, reactive,computed,getCurrentInstance  } from 'vue'
import { image_class, addImageType,editImageType,deleteImageType } from '~/api/image_class.js'

import AsideList from '~/components/AsideList.vue'
import FormDrawer from './FormDrawer.vue';
import { success } from '~/composables/util.js'

const instance = getCurrentInstance();
//加载loading
const loading = ref(false)
const list = ref([])
const activeId = ref(0) //选中的图库

//分页
const currentPage = ref(1)
const total = ref(0)
const limit = ref(10)



//获取数据
getData()
function getData(p = null) {
    if (typeof p == 'number') {
        currentPage.value = p
    }

    loading.value = true
    image_class(currentPage.value).then(res => {
        list.value = res.list
        total.value = res.totalCount

        let item = list.value[0]
        if (item) {
            activeId.value = item.id
            handleChangeActiveID(activeId.value)
        }
    }).finally(() => {
        loading.value = false
    })
}

//表单区域
const formDrawerRef = ref(null)
const formRef = ref(null)
const editId=ref(0)
const drawerTitle=computed(()=>editId.value?'修改':'新增')
const form = reactive({
    name: '',
    order: 50
})
const rules = {
    name: [
        { required: true, message: '图库分类名称不能为空', trigger: 'blur' },
    ]
}
//新增分类
const handleCreate = () => {
    editId.value=0
    form.name=''
    form.order=50
    formDrawerRef.value.open()
}

//编辑分类
const handEdit=(a)=>{
    editId.value=a.id
    form.name = a.name
    form.order = a.order
    formDrawerRef.value.open()
}
//删除分类
const handDelete=(a)=>{
    loading.value = true
    deleteImageType(a.id).then(res => {
            success('删除成功')
            getData()
        }).finally(() => {
            loading.value = false
        })
}


const handSubmit = () => {
    formRef.value.validate((valid) => {
        if (!valid) return
        formDrawerRef.value.showloading()

        const fun = editId.value?editImageType(editId.value,form):addImageType(form)

        fun.then(res => {
            success(drawerTitle.value+'成功')
            getData(editId.value?currentPage.value:1)
            formDrawerRef.value.close()
        }).finally(() => {
            formDrawerRef.value.hidloading()
        })
    })
}

//选中图库分类ID
function handleChangeActiveID(id){
    activeId.value=id
    instance?.proxy?.$Bus.emit('on-num', activeId.value)
}


defineExpose({
    handleCreate
})

</script>

<style scoped>
.image-aside {
    border-right: 1px solid #c4c4c4;
    position: relative;
}

.image-aside .top {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 50px;
    overflow-y: auto;
}

.image-aside .bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.aside-list {
    border-bottom: 1px solid #ca8fec;
    display: flex;
    align-items: center;
    padding: 0 5px;
    cursor: pointer;
}

.aside-list:hover {
    background-color: #ffe3e3;
}
</style>